/**
 * webpack配置文件
 *基于node.js 用的是common.js
 * **/

//resolve用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin');
 module.exports={
     //输入
     entry: './src/index.js',
     //输出
     output: {
         //输出文件名
         filename: "built.js",
         //输出路劲
         //__dirname node.js变量，代表当前文件的目录绝对值
         path: resolve(__dirname,'build')
     },
     //loader配置
     module: {
         rules: [
             //详细的loader配置
             {   //匹配那些文件
                 test:/\.css$/,
                 //style-loader将js中的样式资源创建一个style标签，将js中样式资源插入上去,css-loader将css文件变成common.js模块，里面内容样式字符串
                 use:[
                     'style-loader',
                     'css-loader'
                 ]
             },
             {   //匹配那些文件
                 test:/\.less$/,
                 //style-loader将js中的样式资源创建一个style标签，将js中样式资源插入上去,css-loader将css文件变成common.js模块，里面内容样式字符串
                 use:[
                     'style-loader',
                     'css-loader',
                     'less-loader'
                 ]
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                 loader: 'url-loader',
                 options: {
                     limit: 8*1024,
                     esModule:false
                 }
             },
             {
                 test: /\.(html)$/,
                 use: {
                     loader: 'html-loader'
                 }
             },
             {
                 test: /\.(eot|ttf|woff|woff2)$/i,
                 use: [
                     {
                         loader: 'file-loader',
                     },
                 ],
             }

         ]
     },
     //plugins的配置
     plugins: [
         //默认创建一个空的html ，会自动引入的所有资源
         //复制./index.html下文件 ，会自动引入的所有资源
         new HtmlWebpackPlugin({
             template: './index.html'
         })
     ],
     //模式
     mode:'development',
     // mode:'production'
     //开发服务器 npx webpack-dev-server
     devServer: {
         contentBase:resolve(__dirname,'build'),
         //启动gzip压缩
         compress:true,
         //端口
         port:3000
     }
 }
